<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>

    <title>登录</title>
    <script type="text/javascript">
        var timer;

        function countDown() {
            var number = parseInt($("#sendBtn").text());
            number--;
            console.log(number)
            if(number==0){
                // 清除定时
                clearInterval(timer)
                // 重设按钮为发送,并解开禁用
                $("#sendBtn").text("发送").prop("disabled",false);
            }else{
                $("#sendBtn").text(number);
            }
        }
        function send() {
            // ajax发送请求 , 要求后台短信的发送, 不需要响应
            $.get("/sys?method=sendMessage&phone=" + $("#phone").val());
            //设置按钮
            $("#sendBtn").text(59).prop("disabled", true);
            // 启动定时器
            timer=setInterval(countDown,1000);
        }
        $(function () {
            //1.验证用户名是否存在
            $("#username").change(function () {
                $.get("/user?method=checkName&username=" + this.value, function (result) {
                    var data = JSON.parse(result);
                    if (data.code == 0) {
                        $("#nameMsg").html("用户名不存在").css("color", "red");
                    } else {
                        $("#nameMsg").html("");
                    }
                })
            });
            //2.点击验证码 跟新验证码
            $("#pagecode").click(function () {
                $("#pagecode").attr("src", "code?" + Math.random());
            });
            //3.验证输入的验证码 是否正确
            $("#vcode").change(function () {
                $.get("checkCode", "code=" + this.value, function (data) {
                    if (data == 0) {
                        $("#checkMsg").html("<font color='green'>OK</font>");
                        $("#btn").removeAttr("disabled");
                    } else {
                        $("#checkMsg").html("<font color='red'>ERROR</font>");
                        $("#pagecode").attr("src", "code?" + Math.random());
                        $("#btn").Attr("disabled", true);
                    }
                })
            });
            //4.两周以内自动登录  友好提示
            $("#autoLogin").click(function () {
                if (this.checked) {
                    $("#autoLoginMsg").html("公司电脑请勿勾选此项").css("color", "red");
                } else {
                    $("#autoLoginMsg").html("");
                }
            })
            $("#phone").change(function () {
                let val = $("#phone").val();
                var reg = /^1[(3|4|5|6|7|8|9)][(3|4|5|6|7|8|9)][0-9]{8}$/;
                if (!reg.test(val)) {
                    $("#checkMsgs").text("请填写正确的手机号,如果没有就算了")
                        .css({"color": "red", "border": "1px solid red"});
                } else {
                    $("#checkMsgs").text("ok")
                        .css({"color": "green", "border": "1px solid green"});
                }
            })

            $("#sendBtn").click(function (){
                send();
            })

            $("#vcode").change(function(){
                var code = $(this).val();
                $.get("/sys?method=checkCode&code="+code,function(result){
                    var data = JSON.parse(result);
                    if (data.code == 1) {
                        $("#checkMsgs").html("<font color='green'>"+data.msg+"</font>");
                        // 为了方便开发测试,注释掉禁用先
                       // $("#btn").removeAttr("disabled");
                    } else {
                        $("#checkMsgs").html("<font color='red'>"+data.msg+"</font>");
                       // $("#btn").attr("disabled", true);
                    }
                })

            })
        })
    </script>
</head>
<body>
<!-- login -->
<div class="top center">
    <div class="logo center">
        <a href="${pageContext.request.contextPath }/index.jsp" target="_blank"><img src="./image/mistore_logo.png"
                                                                                     alt=""></a>
    </div>
</div>
<form method="post" action="/user?method=login" class="form center" id="userLogin">
    <div class="login">
        <div class="login_center">
            <div class="login_top">
                <div class="left fl">会员登录</div>
                <div class="right fr">您还不是我们的会员？<a href="${pageContext.request.contextPath }/register.jsp"
                                                            target="_self">立即注册</a></div>
                <div class="clear"></div>
                <div class="xian center"></div>
            </div>
            <div class="login_main center">
                <div class="username">
                    <div class="left fl">用户名:&nbsp;</div>
                    <div class="right fl">
                        <input class="shurukuang" type="text" name="username" id="username"
                               placeholder="请输入你的用户名"/>
                        <label id="nameMsg"></label>
                    </div>
                </div>
                <div class="username">
                    <div class="left fl">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;</div>
                    <div class="right fl">
                        <input class="shurukuang" type="password" name="password" id="pwd"
                               placeholder="请输入你的密码"/>
                    </div>
                </div>
                <div class="username">
                    <div class="left fl">手机号:</div>
                    <div class="right fl">
                        <input class="shurukuang" type="text" id="phone" placeholder="请输入你的手机号"/>
                    </div>
                </div>
                <div class="username">
                    <div class="left fl">验证码:&nbsp;</div>
                    <div class="right fl"><input class="yanzhengma" id="vcode" type="text" placeholder="验证码"/>
                        <button type="button" id="sendBtn" style="font-size: 16px;padding: 3px">发送</button>
                        <br>
                        <label id="checkMsgs"></label></div>
                </div>
<%--                <div class="username">--%>
<%--                    <div class="left fl">&nbsp;&nbsp;&nbsp;&nbsp;</div>--%>
<%--                    <div class="right fl"><label id="checkMsg"></label></div>--%>
<%--                </div>--%>
                <div class="username">
                    <input id="autoLogin" name="auto" type="checkbox"/>&nbsp;&nbsp;两周以内自动登录
                    <span id="autoLoginMsg"></span>
                </div>
                <div class="login_submit">
                    <input class="submit" type="submit" name="submit" value="立即登录" id="btn" <%--disabled--%>>
                </div>
                <span style="color:red">${msg.msg}</span>
            </div>
        </div>
    </div>
</form>
<footer>
    <div class="copyright">简体 | 繁体 | English | 常见问题</div>
    <div class="copyright">小米公司版权所有-京ICP备10046444-<img src="./image/ghs.png" alt="">京公网安备11010802020134号-京ICP证110507号
    </div>

</footer>
</body>
</html>